<template>
	<!-- 20221213 -->
	<view class="tab-categroy-cn height-100p">
		<view class="cn-content flex width-100p height-100p">
			<!-- 一级分类 -->
			<view style="width: 175rpx; height: 100%">
				<ty-tab-vertical v-if="list.length" :list="list" :active.sync="active"></ty-tab-vertical>
			</view>

			<!-- 二级分类 -->
			<view class="flex-one height-100p bg-ff">
				<scroll-view class="width-100p height-100p" scroll-y scroll-with-animation>
					<!-- 广告图 -->
					<view class="padding-30">
						<image class="advert-image jc-image radius-10" style="width: 515rpx; height: 220rpx;"
							:src="advert_img" mode="aspectFill" @click="go(advert_img_link)">
						</image>
					</view>

					<!-- 二级分类 -->
					<view class="flex flex-wrap padding-lr-30 padding-bottom-20">
						<view class="two-category-item padding-tb-30 flex flex-direction align-center" v-for="(item,index) in list2"
							:key="index"
							@click="go(url + '?first_category_id=' + list[active].id + '&second_category_id='+item.id)">
							<image class="jc-avatar" style="width: 95rpx; height: 95rpx;" :src="item.cover_img" mode="aspectFill"></image>
							<text class="margin-top-20 line-height-30 text-24 text-33 text-cut-one">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="cn-layer">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				listKey: 'name'
			}
		},
		props: {
			// 数据显示
			list: {
				type: Array,
				default: []
			},
			// 点击最后一级分类跳转链接
			url: {
				type: String,
				default: '/pages/mall/list'
			}
		},
		computed: {
			advert_img() {
				if (this.list.length) {
					return this.list[this.active].advert_img
				} else {
					return ''
				}
			},
			advert_img_link() {
				if (this.list.length) {
					return this.list[this.active].advert_img_link
				} else {
					return ''
				}
			},
			list2() {
				if (this.list.length) {
					return this.list[this.active]._child
				} else {
					return []
				}
			}
		},

		methods: {

		}
	}
</script>

<style scoped>
	/* 二级分类图标 */
	.two-category-item {
		width: 165rpx;
		margin-right: 10rpx;
	}
	
	.two-category-item:nth-child(3n) {
		margin-right: 0rpx;
	}
</style>